import React, { useRef, useState, useEffect } from 'react'
import { backgroundObj } from '@/utils/utils'
import AudioPlayer from './components/AudioPlayer'
import { View, Text } from "@tarojs/components";
import { AtIcon } from 'taro-ui'
import Taro from '@tarojs/taro'
import "taro-ui/dist/style/components/icon.scss";
import Container from '../Container'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
const innerAudioContext = Taro.createInnerAudioContext()
const Announcement = (props) => {
    const { data = {}, linkGo } = props
    const audioRef = useRef(null)
    const [duration, setDuration] = useState(0);
    const [currentTime, setCurrentTime] = useState(0);
    const iconBase64 = ''
    const { title = '', src, desc, cover, linkShow, styleType = '1', borderRadius, radiusType, backgroundColor, backgroundImage, top, bottom, paddingTop, paddingLeft, backgroundType } = data
    const [isPlaying, setIsPlaying] = useState(false);


    innerAudioContext.onCanplay(() => {
        setCurrentTime(computedTime(innerAudioContext.duration))
    })
    innerAudioContext.onTimeUpdate((e, o) => {
        setDuration(computedTime(innerAudioContext.currentTime))
    })
    const togglePlay = () => {
        if (isPlaying) {
            console.log(333, '暂停')
            innerAudioContext.pause();
            setIsPlaying(false)
        } else {
            console.log(222, '播放')
            innerAudioContext.play()
            setIsPlaying(true)
        };
    }
    const computedTime = (time) => {
        let hour = 0;
        let min = 0;
        let m = 0;
        m = parseInt(time % 60)
        min = parseInt((time / 60) % 60)
        hour = parseInt((time / 60) / 60)
        if (m < 10) {
            m = '0' + m
        }
        if (min < 10) {
            min = '0' + min
        }
        if (min < 1) {
            min = '00'
        }
        if (hour < 1) {
            hour = '00'
        }
        return hour + ':' + min + ':' + m

    }
    useEffect(() => {
        if (src) {
            innerAudioContext.src = src
            console.log(innerAudioContext)
        }
    }, [src]);
    const RenderView = (props) => {
        if (styleType === '1') {
            return <View onClick={() => {
                togglePlay()
            }} className='Audio_style_box1'>
                <View className='title'>
                    <View className='overflow-one'>{title ? title : "此处显示音频标题"}</View>
                    {linkShow && <View onClick={(e) => {
                        e.stopPropagation();
                        linkGo(data)
                    }} className='jump-info'>详情 {'>'}</View>}
                </View>
                <View className='audio-box'>
                    <View className='audio-info '>
                        <View className='audio-line-box'>
                            <View className='audio-line'>
                                <View className='audio-circle'></View>
                            </View>

                        </View>
                    </View>

                    <View className='time-info'>
                        <View>{duration}</View>
                        <View>{currentTime}</View>
                    </View>

                </View>

            </View>
        } else if (styleType === '2') {
            return <View onClick={() => { togglePlay() }} className='audio-style-sec'>
                <View className='audio-icon'> <AtIcon value='play' size='32' color='#1890ff'></AtIcon></View>
                <View className='audio-info'>
                    <View className='title'>
                        <View className='overflow-one'>{title ? title : "此处显示音频标题"}</View>
                        {linkShow && <View onClick={(e) => {
                            e.stopPropagation();
                            linkGo(data)
                        }} className='jump-info'>
                            详情 {'>'}
                        </View>}
                    </View>
                    <View className='time-info'>{currentTime}</View>

                </View>

            </View>
        }
        else {
            return <View className='audio-style-third'>
                <View className='audio-cover' style={backgroundObj(cover)}></View>
                <View className='audio-info'>
                    <View className='info-message'>
                        <View className='titleWrapper'>
                            <View className='title'>
                                {title ? title : "此处显示音频标题"}
                                {linkShow && <View onClick={(e) => {
                                    e.stopPropagation();
                                    linkGo(data)
                                }} className='jump-info'>
                                    详情 {'>'}
                                </View>}
                            </View>
                        </View>
                    </View>
                    <View className='desc'>{desc}</View>
                    <View className='audio-duration'>
                        <View className='time-info'>{currentTime}</View>
                        <View onClick={() => { togglePlay() }} className='play-button'>播放</View>
                    </View>
                </View>
            </View>
        }

    }
    return <Container {...props}>
        <View style={{
            borderRadius: radiusType === 'rightAngle' ? 'none' : borderRadius,
        }}>
            {RenderView()}

        </View>
    </Container>
}

export default Announcement